<template>
  <div>
    <Window
      :show="windowConfig.show"
      :width="width"
      :height="height"
      :showCancel="false"
      :buttons="windowConfig.buttons"
      @close="windowConfig.show = false"
    >
      <div class="title">{{ blog.title }}</div>
      <div v-html="blog.content" class="blog-detail"></div>
    </Window>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, ref } from "vue";
import hljs from "highlight.js"
import "highlight.js/styles/atom-one-light.css"
const { proxy } = getCurrentInstance();

const props = defineProps({
  width: {
    type: Number,
    required: true,
  },
  height: {
    type: Number,
    required: true,
  },
});

const api = {
  getBlogDetail: "/blog/getBlogById",
};

const windowConfig = ref({
  show: false,
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        windowConfig.show = false;
      },
    },
  ],
});

const blog = ref({});
const showDetail = async (blogId) => {
  windowConfig.value.show = true;
  let result = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId: blogId,
    },
  });
  if (!result) {
    return;
  }
  blog.value = result.data;
  nextTick(()=>{
    // 代码高亮
    let blocks = document.querySelectorAll("pre code");
    blocks.forEach((block)=>{
        hljs.highlightBlock(block);
    })
  })
};
defineExpose({ showDetail });
</script>

<style scoped lang="scss">
.title{
    text-align: center;
    font-size: large;
    font-weight: bold;
}

.blog-detail{

    blockquote{
        padding: 0 1em;
        color: gray;
        border-left: 0.25em solid lavender;
    }
    ::v-deep(img){
        max-width: 80%;
    }
}

</style>